<template>
  <div class="login-form">
    <form class="form" @submit.prevent="login">
      <label class="label">
        Username:
        <input type="text" v-model="username" class="input-field" required />
      </label>
      <label class="label">
        Password:
        <input type="password" v-model="password" class="input-field" required />
      </label>
      <button type="submit" class="submit-button">Login</button>
    </form>
  </div>
</template>

<script>
import { useAuthStore } from '../store/auth'

export default {
  name: 'Login',

  data() {
    return {
      username: '',
      password: '',
    }
  },

  methods: {
    login() {
      const authStore = useAuthStore()
      authStore.login({
        username: this.username,
        password: this.password,
      })
      this.$router.push('/')
    },
  },
}
</script>

<style scoped>
.login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form {
  max-width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.label {
  margin-bottom: 10px;
}

.input-field {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.submit-button {
  width: 100%;
  padding: 8px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>
